<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align: left"></div>
  </div>
</template>
<script>
import E from 'wangeditor';
export default {
  name: 'Editor',
  data() {
    return {
      editor: null,
      editorContent: ''
    };
  },
  // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
  props: ['catchData', 'allowEdit', 'needLink'], // 接收父组件的方法
  mounted() {
    this.editor = new E(this.$refs.editorElem);
    // console.log(this.editor);
    
    this.editor.config.zIndex = 1000;
    // 编辑器的事件，每次改变会获取其html内容
    this.editor.config.onchange = (html) => {
      this.editorContent = html;
      this.$emit('contentChange', this.editorContent);
    };
    if (this.needLink) {
      this.editor.config.menus = [
        // 菜单配置
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        // 'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ];
    } else {
      this.editor.config.menus = [
        // 菜单配置
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        // 'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        // 'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ];
    }

    this.editor.config.customUploadImg = (resultFiles, insertImgFn) => {
      // console.log(resultFiles);
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$ajax
        .postFormData('front/file/uploadFile', {
          file: resultFiles[0]
        })
        .then((res) => {
          loading.close();
          insertImgFn(res.resData.url);
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
      // 上传图片，返回结果，将图片插入到编辑器中
    };

    this.editor.create(); // 创建富文本实例
    this.editor.txt.html(this.catchData);
    if (this.allowEdit) {
      this.editor.enable();
    } else {
      this.editor.disable();
    }
  },
  watch: {
    catchData(value) {
      if (this.editor) {
        if (value !== this.editor.txt.html()) {
          this.editor.txt.html(this.catchData || ''); //根据父组件传来的值设置html值
        }
      }
    },
    allowEdit() {
      if (this.allowEdit) {
        this.editor.enable();
      } else {
        this.editor.disable();
      }
    }
  }
};
</script>
<style lang="scss">
.w-e-menu .w-e-panel-container .w-e-panel-tab-content input[type='text'] {
  height: auto !important;
}
</style>